<template>
  <div class="node" :class="{ 'error': node.hasError }" @click="handleNodeClick()">
    <!-- 节点标题 -->
    <div class="node-header" @click="toggleExpand">
      <span v-if="node.children && node.children.length > 0" class="arrow">
        {{ node.expanded ? '▼' : '▶' }}
      </span>
      <span>{{ node.name }}</span>
      <div class="error-indicator" v-if="node.hasError">⚠️</div>
    </div>

    <!-- 子节点 -->
    <Transition name="slide" v-if="node.children && node.children.length > 0">
      <div v-show="node.expanded" class="children">
        <TreeNode
          v-for="child in node.children"
          :key="child.id"
          :node="child"
        />
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  node: Object
});

const emits = defineEmits(['toggle-expand','node-clicked']); // 添加新事件

function toggleExpand(event) {
    event.stopPropagation();
    emits('toggle-expand', props.node.id);
}
function handleNodeClick() {
    // 检查是否是错误节点且有错误子点
    if (props.node.hasError && props.node.subPoints) {
        const errorPoints = props.node.subPoints.filter(point => point.error);

        // 触发事件并传递错误点数据
        emits('node-clicked', {
            nodeId: props.node.id,
            nodeName: props.node.name,
            errorPoints
        });
    }
    
}

</script>

<style scoped>
.node {
  margin: 5px 0px 5px 20px;
  padding: 8px 12px;
  border: 1px solid #fff;
  border-radius: 4px;
  transition: background 0.3s;
  background-color: #fff;
  color: #000;
  border: 1px dotted #e1e1e1;
}
.node.error {
  background-color: #ffe6e6;
  border-color: rgb(255, 116, 116);
  color: #000;
   transition: transform 0.3s ease-in-out;
}
.node.error:hover {
    cursor: pointer;
    transform: translateY(-5px);
}
.arrow {
  margin-right: 8px;
  cursor: pointer;
}
.slide-enter-active,
.slide-leave-active {
  transition: height 0.3s ease;
  overflow: hidden;
}
.slide-enter-from,
.slide-leave-to {
  height: 0;
}
.error-indicator {
  margin-left: 8px;
  color: red;
  font-size: 14px;
}
.node[lay-type="root01"],
.node[lay-type="root02"],
.node[lay-type="root03"] {
  background-color: #fff !important;
  border-color: #ccc !important;
}
</style>